<template>
  <div class="rated">
    <p class="title">最受好评组件</p>
    <div class="wrap">
      <ul ref="ul">
        <li v-for="item in ratedList" :key="item.id">
          <div class="pic">
            <img :src="item.img" alt="" />
            <div class="shadow" v-if="item.sc">观众评分: {{ item.sc }}</div>
            <div class="shadow" v-else>{{ item.wish }}人想看</div>
          </div>
          <p class="nm">{{ item.nm }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入BScroll，用于做滚动操作
import BScroll from "better-scroll";

import { mapState, mapActions } from "vuex";

export default {
  // computed: mapState(["ratedList"]),
  computed: mapState({
    ratedList: (state) => state.rated.ratedList,
  }),
  methods: mapActions(["getRatedListAsync"]),
  async mounted() {
    await this.getRatedListAsync();
    new BScroll(".wrap", {
      startX: 0,
      scrollX: true,
      scrollY: false,
      click: true,
    });
  },
};
</script>

<style scoped lang="less">
.rated {
  width: 375px;
  height: 202px;
  background-color: #fff;
  padding: 12px 15px;

  .title {
    margin-bottom: 12px;
    font-size: @sfont;
  }

  .wrap {
    width: 100%;
    height: 146px;
    overflow: hidden;
    ul {
      display: inline-flex;

      li {
        width: 85px;
        height: 100%;
        flex-shrink: 0;
        margin-right: 10px;

        &:last-child {
          margin: 0;
        }

        .pic {
          width: 85px;
          height: 115px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          .shadow {
            position: absolute;
            width: 100%;
            height: 40px;
            background-image: linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0),
              rgba(0, 0, 0, 1)
            );
            bottom: 0;
            left: 0;
            color: #faaf00;
            font-size: 11px;
            font-weight: 900;
            line-height: 60px;
          }
        }

        .nm {
          width: 100%;
          font-size: @sfont;
          .ells();
        }
      }
    }
  }
}
</style>
